<template>
  <div class="dy-main BringForwardTranDetail">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" @on-click-more="showMenus = true" @on-click-back="back" :left-options="{preventGoBack: true,backText: ''}">次日转账交易查询</x-header>
    </div>
    <div class="dy-body">
      <div class="dy-wapper">
        <!-- <div style="margin-top:20px; padding:0 0.2rem;">
        <zx-button type="tab" :data="['本行转账', '跨行转账']" @on-click="choseType"></zx-button>
      </div> -->
      <div class="dy-bf-screen">
        <div class="text">筛选</div>
        <div class="card">
          <span>账号</span><span class="black" @click="showAction = 1">{{cardNo}}</span><img src="../../assets/img/Account/arrowDown.png" />
          <actionsheet v-model="showAction" :menus="cardList" @on-click-menu="getCard"></actionsheet>
        </div>
        <div class="card date">
          <span>日期</span>
          <span class="black" @click="selectDateSlot()">{{nowDate}}</span>
          <img src="../../assets/img/Account/arrowDown.png" @click="selectDateSlot()" />
        </div>
      </div>
      <!-- <div class="screen">
        <div class="txt">
          <span>筛选</span>
        </div>
        <div class="card">
          <strong>账号</strong>
          <div class="group">
            <h4>
              <popup-radio :options="cardList" v-model="cardNo" :right-options="false">
                <p slot="popup-header" class="card-slot"></p>
              </popup-radio>
            </h4>
            <img src="../../assets/img/Account/arrowDown.png" />
          </div>
        </div>
        <div class="date">
          <span>日期</span>
          <div class="group" @click="selectDateSlot()">
            <h4>{{nowDate}}</h4>
            <img src="../../assets/img/Account/arrowDown.png" />
          </div>
        </div>
      </div> -->
      <div class="simInfo">
        <div class="left">
          <span>合计</span>
          <span>{{totalCash | filterMoney}}</span>
        </div>
        <div class="right">
          <!-- <h3 @click="show('timeShow')">时间区间</h3> -->
          <p @click="show('timeShow')">
            <span>{{timeDate[0]}}</span> 至 <span>{{timeDate[1]}}</span>
          </p>
        </div>

        <zx-timeRang v-model="timeShow" @on-click="setDateVal"></zx-timeRang>
      </div>
    <scroller lock-x scrollbar-y use-pullup :pullup-config="{ content: '上拉加载更多', downContent: '松开进行加载', upContent: '上拉加载更多', loadingContent: '加载中...' }" height="100%" ref="demo3" @on-pullup-loading="getMore" >
    <div class="dyBody">
        <p class="notice">{{errormsg}}</p>
        <div class="item" is-link v-for="(list,listIndex) in lists" :key="listIndex" @click="toNext(listIndex)">
          <div class="left">
            <h3>{{list.tranSerial}}</h3>
            <strong class="red">[{{list.tranDate | dateformat}}]</strong>
          </div>
          <div class="center">
            <h3>{{list.payeeName}}</h3>
            <strong class="red">{{list.payeeNo}}</strong>
          </div>
          <div class="right">
            <h3>{{list.tranAmt | filterMoney}}</h3>
            <strong class="red">人民币</strong>
          </div>
        </div>
    </div>
    </scroller>
    <actionsheet v-model="dateSwitch" show-cancel :menus="menus" @on-click-menu="dateClick"></actionsheet>
    <toast v-model="showPositionValue" type="text" width="6rem" :time="800" is-show-mask :text="errormsg" position="middle">{{ errormsg }}</toast>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showPositionValue: false,
      errormsg: '',
      showAction: 0,
      totalCash: 0, // 合计金额
      cardList: ['6210 **** **** 219', '6210 **** **** 341', '6210 **** **** 567'],
      cardNo: '6210 **** **** 219', // 卡号
      tranType: '本行转账', // 交易类型
      nowDate: '今日',
      today: '', // 今日日期
      dateSwitch: false,
      timeShow: false,
      timeDate: ['2018-05-18', '2018-05-19'],
      timeSwitch: true,
      startDate: '', // 开始时间
      endDate: '', // 结束时间
      menus: {
        menu1: '最近一个月',
        menu2: '最近三个月',
        menu3: '今日',
        menu4: '自定义'
      },
      buttonTxt: '查询',
      lists: [],
      byx: '',
      clickOne: false // 防重点击
    }
  },
  mounted: function () {
    this.getTranData()
    this.today = this.$publicFun.timeFormat('yyyy-MM-dd', new Date())
    this.timeDate[0] = this.today
    this.timeDate[1] = this.today
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    getTranData () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'nextDayToAccountList', 'basic_Data': JSON.stringify({'cardNo': '6229331700010309031', 'pageNo': '1', 'pageSize': '1'})}
        }),
        (response) => {
          // alert(response)
          this.byx = response
          let rep = JSON.parse(response).data
          this.clickOne = false
          if (rep.head.respCode === '000000') {
            let start = parseInt(this.$publicFun.replaceChar('-', this.timeDate[0]))
            let end = parseInt(this.$publicFun.replaceChar('-', this.timeDate[1]))
            if (rep.body.arrays) {
              for (let i = 0, len = rep.body.arrays.length; i < len; i++) {
                let repTime = parseInt(this.$publicFun.replaceChar('-', rep.body.arrays[i].tradeDate))
                if (repTime >= start && repTime <= end) {
                  this.lists.push(rep.body.arrays[i])
                  this.totalCash += parseInt(rep.body.arrays[i].tranAmt)
                }
              }
            } else {
              this.errormsg = '未查询到数据信息'
            }
          } else {
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
          }
        })
    },
    choseType (val) {
      val === false ? this.tranType = '本行转账' : this.tranType = '跨行转账'
    },
    toNext: function (n) {
      this.$router.push({name: 'BringForwardDetail', query: {payeeNo: this.lists[n].payeeNo, payeeName: this.lists[n].payeeName, tradeTime: this.lists[n].tranDate, tranAmt: this.lists[n].tranAmt, tranType: this.tranType, oriTranSerial: this.lists[n].tranSerial}})
    },
    setDateVal (val) {
      this.timeDate = val
      this.getTranData()
    },
    show (timeShow) {
      if (this.clickOne) return true
      this.clickOne = true
      this.timeShow = true
      this.nowDate = '自定义'
    },
    /**
     * 弹出筛选日期段框
     */
    selectDateSlot () {
      if (this.clickOne) return true
      this.clickOne = true
      this.dateSwitch = !this.dateSwitch
    },
    /**
     * 选择筛选时间
     * @param key
     * @param item
     */
    dateClick (key, item) {
      this.nowDate = item
      if (item === '今日') {
        this.timeDate[0] = this.today
        this.timeDate[1] = this.today
      }
      if (item === '最近一个月') {
        this.timeDate[1] = this.today
        this.timeDate[0] = this.$publicFun.setFastTime(this.today, 1)
      }
      if (item === '最近三个月') {
        this.timeDate[1] = this.today
        this.timeDate[0] = this.$publicFun.setFastTime(this.today, 2)
      }
      if (item === '自定义') {
        this.timeShow = true
      }
      this.getTranData()
    },
    loadMore () {
      return false
    },
    getCard (key, val) {
      this.cardNo = val
    }
  }
}
</script>

<style lang="less">
.dy-bf-screen { width: 100%; margin-top: 0.4rem; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; height: 0.88rem; font-size: 0.26rem;}
.dy-bf-screen::after { content: " "; display: block; clear: both;}
.dy-bf-screen>.text { width: 0.98rem; text-align: center; line-height: 0.88rem; color: #999; float: left;}
.dy-bf-screen>.card { position: relative; float: left; height: 0.44rem; line-height: 0.88rem;}
.dy-bf-screen>.card .weui-cell { padding: 0;}
.dy-bf-screen>.card::after { content: " "; display: block; position: absolute; width: 1px; height: 0.44rem; left: 0; top: 0.22rem; background: #999;}
.dy-bf-screen>.card>span, .dy-bf-screen>.card>img { display: inline-block; margin-left: 0.12rem; color: #999;}
.dy-bf-screen>.card>span.black { color: #333;}
.dy-bf-screen>.card>img { width: 0.2rem; height: 0.14rem;margin-right: .1rem;}
.BringForwardTranDetail{
  .notice{
    width: 100%;
    text-align: center;
    font-size: .4rem;
    color: #ccc;
    padding: .5rem;
  }
  .screen {
    display: flex;
    align-items: center;
    height: .88rem;
    font-size: .26rem;
    margin-top:.4rem;
    border-top:1px solid #eaeaea;
    border-bottom:1px solid #eaeaea;
    .txt {
      width: .98rem;
      border-right: 1px solid #eaeaea;
      text-align: center;
      span {
        color:rgba(153,153,153,1);
      }
    }
    .card {
      flex: 1;
      overflow: hidden;
      padding-left: .14rem;
      height:.88rem;
      strong {
        float:left;
        margin-top:.3rem;
        color:rgba(153,153,153,1);
        display: block;
      }
      .group {
        float: left;
        margin-top:.15rem;
        overflow: hidden;
        h4 {
          float:left;
          color:#000;
          span {
            color:#000;
          }
        }
        img {
          margin-top:.22rem;
          width: .2rem;
          height: .14rem;
          float: right;
        }
      }
    }
    .date {
      display: flex;
      width: 2.8rem;
      span {
        width: .64rem;
        color:rgba(153,153,153,1);
      }
      .group {
        flex: 1;
        display: flex;
        flex-direction: row;
        img {
          margin: .1rem 0 0 .15rem;
          width: .2rem;
          height: .14rem;
        }
      }
    }
  };
  .simInfo {
    display: flex;
    align-items: center;
    height: 1rem;
    .left {
      flex: 1;
      padding-right: .32rem;
      overflow: hidden;
      font-family:PingFang-SC-Medium;
      color:rgba(153,153,153,1);
      text-align: right;
      border-right: 1px solid #eaeaea;
      p {
        font-size: .24rem;
        float: left;
        margin-left:2rem;
      }
      span{
        margin-left:.1rem;
        // float:right;
        font-size: .24rem;
      }
    }
    .right {
      width: 3.2rem;
      text-align: right;
      height: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left:.25rem;
      margin-right:.31rem;
      font-size:0.24rem;
      font-family:PingFang-SC-Medium;
      color:rgba(153,153,153,1);
    };
  }
  .dyBody {
    .item {
      margin:.2rem auto;
      display: flex;
      padding: .15rem .26rem 0;
      align-items: center;
      background-color: #fff;
      width:6.9rem;
      height:1.3rem;
      background:rgba(255,255,255,1);
      border-radius: 0.06rem ;
      .left {
        flex:1;
        h3 {
          color:black;
        }
        strong {
          font-size:0.24rem;
          font-family:PingFang-SC-Medium;
          color:rgba(153,153,153,1);
        }
      }
      .center {
        flex:1;
        h3 {
          font-size:0.28rem;
          font-family:PingFang-SC-Bold;
          color:rgba(51,51,51,1);
        }
        strong {
          font-size:0.24rem;
          font-family:PingFang-SC-Medium;
          color:rgba(153,153,153,1);
        }
      }
      .right {
        flex: 1;
        text-align: center;
        h3 {
          font-size:0.3rem;
        font-family:PingFang-SC-Bold;
        color:rgba(255,102,51,1);
        }
        strong {
          font-size:0.24rem;
          font-family:PingFang-SC-Medium;
          color:rgba(153,153,153,1);
        }
      }
    }
  }
  .card-slot {
    position: relative;
    text-align: center;
    padding: .2rem 0;
  }
  .card-slot:after {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
</style>
